<template>
	<view class="item-container">
		<scroll-view scroll-y="true" @scrolltolower="loadMore()" class="scroll_view">
			<view class="applications_scroll_content">
				<!--飞机-->
				<!--火车-->
				<!--酒店-->
				<view v-for="(item, index) in list" :key="index" class="list-item" @click="toDetail(item)">
					<p class="time">预订日期：{{ formatCreateDate(item.createTime) }}</p>
					<view class="main">
						<h3>
							<span>
								<template v-if="item.category === '01'">
									<i>机票</i>
								</template>
								<template v-else-if="item.category === '02'">
									<i>火车站</i>
								</template>
								<template v-else>
									<i>酒店</i>
								</template>
								{{ item.tripCity }}
							</span>
							<template v-if="item.category === '01'">
								<span>{{ item.orderStatus | orderStatus }}</span>
							</template>
							<template v-else-if="item.category === '02'">
								<span>{{ item.orderStatus | orderStatus }}</span>
							</template>
							<template v-else>
								<span>{{ item.orderStatus | orderStatus }}</span>
							</template>
						</h3>
						<p>
							<template v-if="item.category === '01'">
								<span>出发时间</span>
								<span>{{ item.useTime }}</span>
							</template>
							<template v-else-if="item.category === '02'">
								<span>出发时间</span>
								<span>{{ item.useTime }}</span>
							</template>
							<template v-else>
								<span>入住时间</span>
								<span>{{ item.useTime }}</span>
							</template>
						</p>
						<p>
							<template v-if="item.category === '01'">
								<span>航班</span>
								<span>{{ item.tripCode }}</span>
							</template>
							<template v-else-if="item.category === '02'">
								<span>车次</span>
								<span>{{ item.tripCode }}</span>
							</template>
							<template v-else>
								<span>房型</span>
								<span>{{ item.tripCode }}</span>
							</template>
						</p>
						<p>
							<template v-if="item.category === '01'">
								<span>机场</span>
							</template>
							<template v-else-if="item.category === '02'">
								<span>车站</span>
							</template>
							<template v-else>
								<span>房间数量</span>
							</template>
							<span>{{ item.tripInfo }}</span>
						</p>
						<p>
							<span>金额</span>
							<span>¥{{ moneyToCurrency(item.totalPrice) }}</span>
						</p>
					</view>
				</view>
			</view>

			<template v-if="showBottom">
				<view class="application_load_more">
					<view class="load_more icon-yanzhengzhong" v-if="showLoadMore">
						<view class="loading">&#xe629;</view>
						<view class="loading_text">加载中...</view>
					</view>
					<view class="no_more" v-else>没有更多了~</view>
				</view>
			</template>
			<template v-else>
				<template v-if="showLoadMore">
					<view class="application_load_more">
						<view class="load_more icon-yanzhengzhong">
							<view class="loading">&#xe629;</view>
							<view class="loading_text">加载中...</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="nodata">
						<image src="../../../static/img/noTravalApply.png" class="img_top" mode="aspectFill"></image>
						<view class="">暂无订单记录</view>
					</view>
				</template>
			</template>
		</scroll-view>
	</view>
</template>

<script>
import { getOrderApplyList } from '@/api/order.js';
import moment from 'moment';
export default {
	data() {
		return { list: [], page: 1, showBottom: false, showLoadMore: false };
	},
	props: {
		//查询提示文字
		active: {
			type: Number,
			default: 0
		}
	},
	watch: {
		active: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				console.log('nval', newVal);
				console.log('oldval', oldVal);
				if (newVal !== oldVal && oldVal != undefined) {
					this.page = 1;
					this.showBottom = false;
					this.showLoadMore = false;
					this.list = [];
					this.getList();
				}
			}
		}
	},
	created() {
		this.page = 1;
		this.getList();
	},
	filters: {
		orderStatus(status) {
			switch (status) {
				case '01':
					return '待支付';
					break;
				case '02':
					return '已支付';
					break;
				case '03':
					return '支付失败';
					break;
				case '04':
					return '支付超时';
					break;
				case '05':
					return '占座中';
					break;
				case '06':
					return '已占座';
					break;
				case '07':
					return '占座失败';
					break;
				case '08':
					return '占座取消';
					break;
				case '09':
					return '出票中';
					break;
				case '10':
					return '已出票';
					break;
				case '11':
					return '出票失败';
					break;
				case '12':
					return '退票中';
					break;
				case '13':
					return '已退票';
					break;
				case '14':
					return '部分退票';
					break;
				case '15':
					return '退票失败';
					break;
				case '16':
					return '改签中';
					break;
				case '17':
					return '已改签';
					break;
				case '18':
					return '部分改签';
					break;
				case '19':
					return '改签失败';
					break;
				case '20':
					return '部分改签&部分退票';
					break;
				case '21':
					return '待确认';
					break;
				case '22':
					return '已确认';
					break;
				case '23':
					return '确认失败';
					break;
				case '24':
					return '待入住';
					break;
				case '25':
					return '已入住';
					break;
				case '26':
					return '未使用';
					break;
				case '27':
					return '已使用';
					break;
				case '28':
					return '未完成';
					break;
				case '29':
					return '已完成';
					break;
				case '30':
					return '取消中';
					break;
				case '31':
					return '已取消';
					break;
				case '32':
					return '取消失败';
					break;
				case '33':
					return '退款中';
					break;
				case '34':
					return '已退款';
					break;
				case '35':
					return '退款失败';
					break;
				case '36':
					return '已扣款';
					break;
				case '37':
					return '掌银已支付';
					break;
				case '39':
					return '支付结果确认中';
					break;
				default:
					return '其他';
					break;
			}
		}
	},
	methods: {
		moneyToCurrency(value) {
			if (!value) return 0;
			const intPart = Math.trunc(value);
			const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/, '$1,');
			let floatPart = '.00';
			const valueArray = value.toString().split('.');
			if (valueArray.length === 2) {
				floatPart = valueArray[1].toString();
				return intPartFormat + floatPart;
			} else {
				return intPartFormat + floatPart;
			}
		},
		formatCreateDate(data) {
			if (data.length == 8) {
				return moment(data, 'YYYYMMDD').format('MM-DD');
			} else {
				return moment(data, 'YYYYMMDD').format('YYYY-MM-DD');
			}
		},
		// 查看详情页面
		toDetail(item) {
			let type = item.category;
			console.log(item, type);
			let path = '';
			switch (type) {
				case '01':
					if (item.rebookFlag === '0') {
						path = 'planeOrderDetail?id=0&from=miniapp' + '&flOrId=' + item.orderId + '&idOnDuty=' + item.isOnDuty;
					} else {
						// 改签
						path = 'planeOrderDetail?id=0&from=miniapp' + '&flOrId=' + item.orderId + '&idOnDuty=' + item.isOnDuty;
					}
					uni.navigateTo({
						url: '/pages/webViewh5/index?path=' + encodeURIComponent(path)
					});
					break;
				case '02':
					path = 'trainOrderDetail?&from=miniapp' + '&flOrId=' + item.orderId + '&idOnDuty=' + item.isOnDuty;
					uni.navigateTo({
						url: '/pages/webViewh5/index?path=' + encodeURIComponent(path)
					});
					break;
				case '03':
					path = 'hotelOrderDetail?&from=miniapp' + '&orderId=' + item.orderId;
					uni.navigateTo({
						url: '/pages/webViewh5/index?path=' + encodeURIComponent(path)
					});
					break;
				default:
					break;
			}
		},
		loadMore() {
			console.log('loadMore');
			if (this.showBottom && this.showLoadMore) {
				this.page += 1;
				this.getList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getList();
		},
		// 获取列表信息
		async getList() {
			let category = '';
			switch (this.active) {
				case 0:
					category = '';
					break;
				case 1:
					category = '01';
					break;
				case 2:
					category = '02';
					break;
				case 3:
					category = '03';
					break;
				default:
					break;
			}
			let params = {
				page: this.page,
				category: category
			};
			const res = await getOrderApplyList(params);
			console.log('res', res);
			if (res[1].respCode === 'FJKBP0000' && res[1].respCode !== null) {
				// uni.stopPullDownRefresh();
				if (this.page == 1) {
					this.list = [];
				}
				const result = res[1].data;
				result.records.forEach(item => {
					this.list.push(item);
				});
				//没有数据
				if (!this.list || this.list.length == 0) {
					console.log('没有数据');
					this.showBottom = false;
					this.showLoadMore = false;
				} else {
					// 有数据
					console.log('有数据');
					this.showBottom = true;
					if (result.current >= result.pages) {
						console.log('不在加载数据');
						this.showLoadMore = false;
					} else {
						console.log('在加载数据');
						this.showLoadMore = true;
					}
				}
			} else {
				this.showBottom = false;
				this.showLoadMore = false;
			}
		}
	}
};
</script>

<style lang="scss">
.application_load_more {
	height: 44rpx;
	align-items: center;
	justify-content: center;
	display: flex;
}
@keyframes loading_circle {
	0% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(36deg);
	}
	20% {
		transform: rotate(72deg);
	}
	30% {
		transform: rotate(108deg);
	}
	40% {
		transform: rotate(144deg);
	}
	50% {
		transform: rotate(180deg);
	}
	60% {
		transform: rotate(216deg);
	}
	70% {
		transform: rotate(252deg);
	}
	80% {
		transform: rotate(288deg);
	}
	90% {
		transform: rotate(324deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.load_more {
	font-family: 'iconfont';
	display: flex;
	.loading {
		animation: loading_circle 1.5s ease-in-out infinite;
	}
	.loading_text {
		padding-left: 16rpx;
	}
}
.applications_scroll_content {
	display: flex;
	width: 100%;
	flex-direction: column;
}
.scroll_view {
	height: 100%;
}
.item-container {
	width: calc(100% - 64rpx);
	padding: 0 32rpx 50rpx;
	.img_top{
		width: 560rpx !important;
		height: 300rpx !important;
	}
}

.list-item {
	width: 100%;

	.time {
		font-size: 26rpx;
		color: #666;
		margin: 40rpx 0 20rpx;
	}

	& > .main {
		background: #fff;
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		padding: 0 32rpx 30rpx;

		& > h3 {
			display: flex;
			justify-content: space-between;
			color: #333;
			padding: 26rpx 0 24rpx;
			border-bottom: 1px solid #e5e5e5;

			span {
				&:first-child {
					font-size: 32rpx;
					display: flex;

					i {
						display: inline-block;
						padding: 3rpx 12rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						text-align: center;
						color: #ffa900;
						border: 1px solid #ffa900;
						margin-right: 16rpx;
						border-radius: 4rpx;
					}
				}

				&:last-child {
					font-size: 30rpx;
				}
			}
		}

		p {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #333;
			margin-top: 24rpx;

			span {
				&:first-child {
					width: 120rpx;
					color: #666;
				}

				&:last-child {
					flex: 1;
					text-align: right;
				}
			}
		}
	}
}
</style>
